/* 头部区域开始 */
header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333333;
    font-size: 12px;
}

.wrap {
    width: 1226px;
    /*border: 1px solid red;*/
    /* 自动外边距实现水平居中 */
    margin: auto;
}

header ul>li {
    float: left;
}

header ul>li>a {
    color: #b0b0b0;
}

header ul>li>span {
    color: #424242;
    margin: 0 5px;
}
/* 头部区域中a标签悬停时的样式 */
header ul>li>a:hover {
    color: #FFFFFF;
}

/* 左侧的菜单列表 */
.header-left {
    float: left;
}

/* 下载APP区域 */
.download {
    position: relative;
}

.download>.sanjiaoxing {
    width: 0;
    height: 0;
    /* 底边长16个像素 */
    border-bottom: 8px solid #FFFFFF;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    display: none;
}

.download>aside {
    position: absolute;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    width: 124px;
    height: 0;
    overflow: hidden;
    left: 50%;
    margin-left: -62px;
    transition: all 0.5s linear;
    background-color: #FFFFFF;
    z-index: 1;
}

.download>aside>img {
    width: 90px;
    height: 90px;
    margin: 18px 18px 0;
    line-height: 0;
}

.download>aside>p {
    text-align: center;
    line-height: 0;
}

.download:hover>.sanjiaoxing {
    display: block;
}

.download:hover>aside {
    height: 148px;
}

/* 右侧的菜单列表 */
.header-right {
    float: right;
}

/* 购物车区域 */
.cart {
    width: 120px;
    height: 40px;
    text-align: center;
    background-color: #424242;
    margin-left: 20px;
    /* 没有设置left/top/right/bottom，位置不会变动 */
    /* 仅仅只是为内部元素做定位的一个参考 */
    position: relative;
    /* 鼠标悬停时的鼠标类型 */
    cursor: pointer;
    /* 等待aside区域滑动效果完成后，再执行背景色还原 */
    transition: all 0s linear 0.5s;
}

.cart>a {
    /* 对称性（双向）的动画效果 */
    transition: all 0s linear 0.5s;
}

.cart>.icon-gouwuche {
    color: #b0b0b0;
    font-size: 18px;
    vertical-align: bottom;
    margin-right: 4px;
    transition: all 0s linear 0.5s;
}

.cart>aside {
    width: 316px;
    height: 0;
    /* 内部超出就隐藏 */
    overflow: hidden;
    line-height: 100px;
    text-align: center;
    /* 参考父元素中设置了position属性的父元素来做定位的 */
    position: absolute;
    /* 距离右边0 */
    right: 0;
    /* 盒子阴影 */
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    /* 鼠标悬停和移出的时候都有动画效果 */
    transition: all 0.5s linear;
    background-color: #FFFFFF;
    z-index: 2;
}
/* 购物车区域，鼠标悬停时自身的样式 */
.cart:hover {
    background-color: #FFFFFF;
    transition: all 0s linear;
}

.cart:hover>.icon-gouwuche {
    color: #FF6700;
    transition: all 0s linear;
}

.cart:hover>a {
    color: #FF6700;
    /* 只有悬停时的动画效果 */
    transition: all 0s linear;
}

/* 高度逐渐增加 */
.cart:hover>aside {
    height: 100px;
}
/* 头部区域结束 */

/* 白色导航开始 */
nav {
    width: 100%;
    height: 100px;
}

/* logo区域 */
.logo {
    width: 234px;
    height: 100px;
    box-sizing: border-box;
    padding-top: 22px;
    float: left;
}
/* logo图片 */
.logo-img {
    background-image: url('../img/logo.png');
    background-size: 56px;
    width: 56px;
    height: 56px;
}

/* 导航菜单项 */
.nav-bar {
    float: left;
    width: 696px;
    height: 100px;
}

.nav-bar>ul>li {
    float: left;
    line-height: 100px;
}

.nav-bar>ul>li>a {
    color: #333333;
    font-size: 14px;
    padding: 0 10px;
}

.nav-bar>ul>li:hover>a {
    color: #FF6700;
}

/* 商品列表扩展区域 */
.nav-bar>ul>aside {
    position: absolute;
    background: #FFFFFF;
    z-index: 10;
    /* 定位的参考模板是网页 */
    left: 0;
    /* 黑色头部区域和白色导航区域的总高度 */
    top: 140px;
    /* 网页宽度的100% */
    width: 100%;
    /* 还原父元素中设置的line-height */
    line-height: normal;
    text-align: center;
    height: 0;
    overflow: hidden;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
    transition: height 0.5s linear;
}

.nav-bar>.nav-bar-left:hover>aside {
    /* 经过调试后的一个自动高度，但是需要在这写出来以支撑动画效果 */
    height: 212px;
    /* 悬停的时候才出现边框 */
    border-top: 1px solid #e0e0e0;
}
/* 所有的商品列表 */
.nav-bar>ul>aside ul {
    position: absolute;
    opacity: 0;
}

/* 白色导航区域的扩展区域的商品区块：图片、名称、价格 */
.item {
    float: left;
    width: 204.5px;
    padding: 30px 0 20px;
}

.item:last-child {
    width: 203.5px;
}

.item-img {
    /*margin-top: 30px;*/
    border-right: 1px solid #e0e0e0;
}

.item:last-child>a>.item-img {
    border-right: none;
}

.item-img>img {
    /* 不能在这里设置上外边距，会导致父元素的右边框增加 */
    /*margin-top: 30px;*/
    width: 160px;
    height: 110px;
}

.item>a>p {
    font-size: 12px;
}
.item-name {
    margin-top: 15px;
    color: #333333;
}
.item-price {
    color: #FF6700;
}

/* 搜索区域 */
.search {
    float: left;
    width: 296px;
    height: 100px;
    box-sizing: border-box;
    padding-top: 25px;
    /*background-color: #FF6700;*/
}

.search>input {
    width: 223px;
    height: 48px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    outline: none;
    vertical-align: middle;
    font-size: 14px;
    color: #b0b0b0;
}

.search>.icon-sousuo {
    display: inline-block;
    width: 50px;
    margin-left: -5px;
    height: 48px;
    border: 1px solid #e0e0e0;
    border-left: none;
    vertical-align: middle;
    color: #9a9a9a;
    font-size: 24px;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}

.search>aside {
    width: 223px;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    border-top: none;
    background-color: #FFFFFF;
    font-size: 14px;
    color: #9a9a9a;
    position: absolute;
    z-index: 1;
}

.search>aside>p {
    margin: 8px 0;
    cursor: pointer;
}

.search>input:focus {
    border: 1px solid #ff6700;
}

.search>input:focus~.icon-sousuo {
    border: 1px solid #ff6700;
    border-left: none;
}

.search>input:focus~aside {
    border: 1px solid #ff6700;
    border-top: none;
    height: auto;
}

.search>.icon-sousuo:hover {
    background-color: #ff6700;
    color: #FFFFFF;
}
/* 白色导航结束 */